<template>
	<view class="content">
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				姓名
			</view>
			<view class="ipt">
				<input @input="checkNum($event)" type="text" v-model="formData.userName" placeholder="请输入姓名" placeholder-class="placeholder">
			</view>

		</view>
		<view class="error" v-if="rules.name == false">
			请输入姓名
		</view>
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				手机号码
			</view>
			<view class="ipt">
				<input @input="checkPhone($event)" type="text" v-model="formData.userMobile" placeholder="请输入11位手机号" placeholder-class="placeholder"
					maxlength="11">
			</view>
		</view>
		<view class="error" v-if="rules.phone == false">
			请输入手机号码
		</view>
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				所在地区
			</view>
			<view class="ipt">
				<uni-data-picker style="width: 100%;" :localdata="addressList" @change="onchange"
					@nodeclick="onnodeclick">
					<view class="" :class="region == '请选择省、市、区' ? 'placeholder' : 'picker'">
						{{region}}
					</view>
				</uni-data-picker>
			</view>
		</view>
		<view class="error" v-if="rules.address == false">
			请选择省市区
		</view>
		<view class="flx">
			<view class="name">
				<span class="red">*</span>
				地址
			</view>
			<view class="ipt ipt2">
				<textarea @input="checkAddress($event)" v-model="detailAddress" placeholder="小区、写字楼、门牌号等" placeholder-class="placeholder"></textarea>
			</view>
		</view>
		<view class="error" v-if="rules.addressDetail == false">
			请输入详细地址
		</view>
		<view class='flx' style="margin-top: 60rpx;">
			<view class='name'>设为默认收货地址</view>
			<view class="switch">
				<u-switch v-model="value"  activeColor="var(--global-bg-color)" @change="change"></u-switch>
			</view>
		</view>

		<view class="save" @click="save">编辑</view>

	</view>
</template>

<script>
	import address from '../../static/js/address.js'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				formData: {
					userName: '',
					userMobile: '',
					recycleAddress: '',
					// isDefault: ''
				},
				value:'',
				flag:false,
				region: '请选择省、市、区',
				detailAddress: '',
				addressList: [],
				rules: {
					name: true,
					phone: true,
					address: true,
					addressDetail: true
				}
			};
		},

		onLoad(option) {
			let that = this
			// 设置导航栏的颜色和标题颜色
			// uni.setNavigationBarColor({
			// 	frontColor: "#000000", //文字颜色
			// 	backgroundColor: "#FFFFFF" //底部背景色
			// })
			this.id = option.id
			console.log(option,'option')
			this.addressList = address.provinces
			that.formData.userName = option.userName
			this.formData.userMobile = option.userMoblie
			this.region = option.recycleAddress
			this.value = JSON.parse(option.isDefault)
			// this.formData.isDefault = option.isDefault
			console.log(this.value,'this.value')
			var parts = this.region.split(' ');
			var part1 = parts[0];
			var part2 = parts[1];
			this.region = part1
			this.detailAddress = part2
			

		},

		methods: {
			change(e) {
				let that = this
				this.formData.isDefault = e
				console.log('change', that.id,e);
				request.post(`/api/recycle/address/updateDefault`,
					{
					  id:that.id,
					  isDefault:e
					}
				).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateTo({
								//保留当前页面，跳转到应用内的某个页面
								url: '/pagesA/address-management/address-management'
							})
						}, 2000)
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 方法
			checkNum(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				this.rules.name = true
				console.log(val);
				if (!val) {
					this.val = '';
					return
				}
			},
			checkPhone(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				this.rules.phone = true
				console.log(val);
				if (!val) {
					this.val = '';
					return
				}
			
			},
			checkAddress(e){
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				this.rules.addressDetail = true
			},
			onchange(e) {
				const value = e.detail.value
				this.region = e.detail.value[0].text + '' + e.detail.value[1].text + '' + e.detail.value[2].text;
			},

			onnodeclick(e) {
				this.rules.address = true
				console.log(e,'333333333333333333333333');
			},
			save() {
				let that = this
				if(that.formData.userName == ''){
					this.rules.name = false
				}else if(that.formData.userMobile == ''){
					this.rules.phone = false
				}else if(that.region == '请选择省、市、区'){
					this.rules.address = false
				}else if(that.detailAddress == ''){
					this.rules.addressDetail = false
				}else{
					uni.showModal({
						content: '你确定要修改收货地址吗？',
						success: function(res) {
							console.log('success', that.formData);
							that.formData.recycleAddress= that.region + ' ' + that.detailAddress
							if (res.confirm) {
								request.put(`/api/recycle/address/${that.id}`,
									that.formData
								).then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '修改成功',
											icon: 'none',
											duration: 2000
										})
										setTimeout(() => {
											uni.navigateTo({
												//保留当前页面，跳转到应用内的某个页面
												url: '/pagesA/address-management/address-management'
											})
										}, 2000)
									} else{
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
							} else if (res.cancel) {
					
							}
						}
					});
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.red {
		color: red;

	}

	.error {
		color: red;
		padding: 0 0rpx 24rpx 144rpx;
		font-weight: bolder;
		font-size: 24rpx;
	}

	.content {

		background: #fff;
		padding: 24rpx;

		.flx {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.name {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				line-height: 34rpx;
			}

			.ipt {
				width: 532rpx;
				height: 70rpx;
				background: #F1F4F9;
				border-radius: 15rpx;
				padding: 0 16rpx;

				input,
				.picker,
				textarea {
					width: 100%;
					height: 100%;
				}

				.picker {
					line-height: 70rpx;
				}

				.placeholder {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999;
					line-height: 70rpx;
				}
			}

			.ipt2 {
				height: 140rpx;

				textarea {
					padding-top: 16rpx;
				}

				.placeholder {
					line-height: 40rpx;
				}
			}
		}
	}

	.save {
		position: fixed;
		bottom: 5vh;
		left: 0;
		width: 90%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-family: Source Han Sans SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		opacity: 0.85;
		background-color: var(--global-bg-color);
		border-radius: 50rpx;
		margin: 0 5%;
	}
</style>